<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>	
<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<div class="box-name">
					<i class="fa fa-table"></i> <span>部门管理</span>
				</div>
				<div class="box-icons">
					<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
					</a> <a class="expand-link"> <i class="fa fa-expand"></i>
					</a> <a class="close-link"> <i class="fa fa-times"></i>
					</a>
				</div>
				<div class="no-move"></div>
			</div>

			<div class="box-content no-padding">
				
				<table
					class="table table-striped table-bordered table-hover table-heading no-border-bottom">
					<thead>
						<tr>
							<th>#</th>
							<th>部门名称</th>
							<th>描述</th>
							<th>部门主管</th>
							<th>电话</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
					<%int index=0; %>
					<c:forEach var="department" items="${departments}">
					<% index++; %>
						<tr>
							<td><%=index%><span id="departmentId" style="display:none">${department.id}</span></td>
							<td><span id="dName">${department.name}</span></td>
							<td><span id="dDesc">${department.description}</span></td>
							<td>${department.departmentManager}</td>
							<td><span id="dPhone">${department.phone}</span></td>
							<td><button class="btn btn-primary" data-toggle="modal" data-target="#Edit" id="departmentE">编辑</button></td>
						</tr>
					</c:forEach>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
<script>
$(function(){
	$("tbody").on("click","#departmentE",function(){
		var id=$(this).parent().parent().find("#departmentId").html();
		var departmentName=$(this).parent().parent().find("#dName").html();
		var departmentDescription=$(this).parent().parent().find("#dDesc").html();
		var departmentPhone=$(this).parent().parent().find("#dPhone").html();
		console.log(id + departmentName + departmentPhone);	
		$("#departmentForm").find("input[name='id']").attr("value",id);
		$("#departmentForm").find("#departmentName").attr("value",departmentName);
		$("#departmentForm").find("#departmentDescription").attr("value",departmentDescription);
		$("#departmentForm").find("#departmentPhone").attr("value",departmentPhone);		
	})
	$("#newDepartmentBtn").click(function(){
		$("#departmentForm").find("input[name='id']").attr("value",0);
		$("#departmentForm").find("#departmentName").attr("value","");
		$("#departmentForm").find("#departmentDescription").attr("value","");
		$("#departmentForm").find("#departmentPhone").attr("value","");
	})
})
</script>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Edit" id="newDepartmentBtn">
	新建部门
</button>
